<template>
    <div class="background-container" :style="{ backgroundImage: `url(${images.logo})` }">
        <div class="overlay-container">
            <div class="login-box">
                <img class="logo" :src="images.logo" alt="">
                <div class="login-title">扫码登录</div>
                <div style="width: 100%;font-size: 14px;margin-top: 10px;">
                    使用小程序功能>扫一扫扫码并登录
                </div>
                <div v-if="loginForm.error.length" class="error-message">
                    {{ loginForm.error }}
                </div>
                <!-- <xInput v-model="loginForm.form.account" :error="loginForm.error.length" class="input-field"
                    place-holder="学号/工号"></xInput>
                <xInput v-model="loginForm.form.password" :error="loginForm.error.length" class="input-field"
                    place-holder="密码" type="password"></xInput>
                <div class="login-button-container">
                    <xButton @click="loginForm.handleLoginButtonClick">登录</xButton>
                </div> -->
                <div style="width: 100%;text-align: center;margin-top: 20px;">
                    <img :src="loginForm.qrcode" style="width: 250px;" alt="">
                </div>

            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import images from '../assets/images.js'
import xInput from '../components/xInput.vue'
import xButton from '../components/xButton.vue'
import tool from '../module/tool.js'
import sha256 from 'js-sha256'
import store from '../module/store.js'
import router from '@/router/index.js'

const loginForm = ref({
    form: {
        account: '',
        password: ''
    },
    error: '',
    async handleLoginButtonClick() {
        loginForm.value.error = ''
        if (loginForm.value.form.account == '') {
            loginForm.value.error = '请输入学号/工号'
            return
        }
        if (loginForm.value.form.password == '') {
            loginForm.value.error = '请输入密码'
            return
        }
        let re = await tool.requestMethod('/webLogin', {
            account: loginForm.value.form.account,
            password: sha256(loginForm.value.form.password)
        })
        if (re.status == 1) {
            store.setItem('userData', re.results)
            tool.controlCoverForm(1)
            router.push('/')
        } else {
            loginForm.value.error = re.content
        }
    },
    qrcode: undefined,
    async getQRCode() {
        let re1 = await tool.requestMethod('/user/qrcodeLogin/get')
        if (re1.status) {
            this.qrcode = re1.results.qrcode
            while (1) {
                await tool.wait(2)
                let re = await tool.requestMethod('/user/qrcodeLogin/check', {
                    string: re1.results.string
                },false)
                if (re.status == 0) {
                    tool.controlWarningForm(true, re.content + '，请刷新页面。', () => {
                        location.reload()
                    }, undefined, false)
                    return
                }
                if (re.status == 1 && re.results != undefined) {
                    store.setItem('userData', re.results)
                    tool.controlCoverForm(1)
                    router.push('/')
                    return
                }
            }
        } else {
            tool.controlWarningForm(true, re1.content, () => {
                location.reload()
            }, () => { }, false)
        }
    }
})

onMounted(async () => {

    loginForm.value.getQRCode()
})
</script>

<style scoped>
.background-container {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.overlay-container {
    width: 100%;
    height: 100%;
    backdrop-filter: blur(60px);
    background-color: rgba(230, 230, 230, 0.7);
    padding-left: 50vw;
    padding-top: 50vh;
}

.login-box {
    display: inline-block;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px;
    width: 440px;
    padding: 44px;
    background-color: #fff;
    transform: translate(-50%, -50%);
}

.logo {
    height: 24px;
}

.login-title {
    font-weight: 600;
    color: rgb(27, 27, 27);
    font-size: 1.5rem;
    line-height: 28px;
    margin-top: 16px;
}

.error-message {
    font-size: 14px;
    color: red;
    margin-top: 12px;
}

.input-field {
    width: 100%;
    margin-top: 12px;
}

.login-button-container {
    margin-top: 16px;
    text-align: right;
}
</style>
